<template>
  <div>
    <div class="pageTitleWhole">
      <a-breadcrumb>
        <a-breadcrumb-item>总耗油情况</a-breadcrumb-item>
      </a-breadcrumb>
    </div>
    <div id="takeoutMain">
      <a-form-model layout="inline" :model="form">
        <a-form-model-item label="耗油类型">
          <a-select v-model="form.oilBusinessType" style="width: 120px">
            <a-select-option value>全部</a-select-option>
            <a-select-option value="UPKEEP">保养耗油</a-select-option>
            <a-select-option value="REPAIR">维修耗油</a-select-option>
            <a-select-option value="ANNUAL">年检耗油</a-select-option>
            <a-select-option value="FUEL">航线耗油</a-select-option>
            <a-select-option value="OTHER">其它耗油</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="船名">
          <a-select v-model="form.shipId" style="width: 120px">
            <a-select-option value>全部</a-select-option>
            <a-select-option v-for="item in shipList" :key="item.id" :value="item.id">{{item.name}}</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="航次">
          <a-input type="text" v-model="form.voyageNumberLike" />
        </a-form-model-item>
        <a-form-model-item label="加油批次号">
          <a-input type="text" v-model="form.purchaseBatchNoLike" />
        </a-form-model-item>
        <a-form-model-item label="是否航线耗油">
          <a-select v-model="form.isFuel" style="width: 120px">
            <a-select-option value>全部</a-select-option>
            <a-select-option :value="1">是</a-select-option>
            <a-select-option :value="0">否</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="产生耗油日期">
          <a-range-picker @change="dateChange" style="width: 250px" />
        </a-form-model-item>
        <a-form-model-item>
          <a-button type="primary" @click="check">查询</a-button>
        </a-form-model-item>
        <a-form-model-item>
          <a-button type="primary" @click="exportExcel">导出excel</a-button>
        </a-form-model-item>
      </a-form-model>
      <a-table
        :columns="columns"
        :loading="loading"
        :data-source="data"
        :style="'margin-top: 25px;'"
        :pagination="pagination"
        :row-key="(record,index) => index"
      >
        <template slot="oilBusinessType" slot-scope="text,record">
          <span v-if="record.businessType==='REPAIR'">维修耗油</span>
          <span v-else-if="record.businessType==='ANNUAL'">年检耗油</span>
          <span v-else-if="record.businessType==='UPKEEP'">保养耗油</span>
          <span v-else-if="record.businessType==='OTHER'">其它耗油</span>
          <span v-else-if="record.businessType==='FUEL'">航线耗油</span>
        </template>
        <template slot="voyage" slot-scope="text,record">
          <a v-if="record.voyageNumber" @click="detail(record)">{{record.voyageNumber}}</a>
          <span v-else>--</span>
        </template>
      </a-table>
    </div>
  </div>
</template>
<script>
import { queryShipOilOutList, queryShipNameList } from '@/api/shipCenter'
import { commonExport } from '@/api/request'
const columns = [
  {
    title: '序号',
    width: 80,
    customRender: (text, record, index) => {
      return index + 1
    }
  },
  {
    title: '耗油类型',
    _needName: true,
    dataIndex: 'businessType',
    scopedSlots: {
      customRender: 'oilBusinessType'
    }
  },
  {
    title: '船名',
    dataIndex: 'custName'
  },
  {
    title: '航次',
    dataIndex: 'voyageNumber',
    scopedSlots: {
      customRender: 'voyage'
    }
  },
  {
    title: '产生耗油日期',
    dataIndex: 'createTime'
  },
  {
    title: '耗油量（吨）',
    dataIndex: 'oilVolume',
    customRender: (text, record, index) => {
      return record.oilVolume.toFixed(4)
    }
  },
  {
    title: '耗油总金额（元）',
    dataIndex: 'totalAmount',
    customRender: (text, record, index) => {
      return record.totalAmount.toFixed(2)
    }
  },
  {
    title: '加油批次号',
    width: 200,
    dataIndex: 'purchaseBatchNo'
  }
]
export default {
  data () {
    return {
      shipList: [],
      form: {
        shipId: '', // 船id
        inOrOut: 2, // 耗油出库
        oilBusinessType: '', // OIL(“加油”),FUEL(“航线耗油”),REPAIR(“维修”),ANNUAL(“年检”),UPKEEP(“保养”),OTHER(“其它”)
        startDate: '',
        endDate: '',
        oilType: 1,
        isFuel: '',
        voyageNumberLike: '',
        purchaseBatchNoLike: ''
      },
      pageNum: 1,
      pageSize: 10,
      loading: true,
      data: [],
      columns,
      pagination: {},
      btnControl: {}
    }
  },
  methods: {
    shipNameList () {
      queryShipNameList({
        status: 1,
        isSelfOperation: 1
      }).then(res => {
        this.shipList = res.data
      })
    },
    check () {
      this.pageNum = 1
      this.pageSize = 10
      let paramData = {
        ...this.form,
        pageSize: this.pageSize,
        pageNum: this.pageNum
      }
      //   // console.log(paramData)
      this.queryRoute(paramData)
    },
    exportExcel () {
      commonExport('/ship/exportShipOilOutList', {
        ...this.form,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        columns: this.columns
      })
    },
    queryRoute (paramData) {
      this.loading = true
      queryShipOilOutList(paramData)
        .then(res => {
          //   // console.log(res.data.list)
          this.data = res.data.list
          let currentPage = this.pageNum
          this.pagination = {
            current: currentPage,
            pageSize: res.data.pageSize,
            total: res.data.total,
            showQuickJumper: false,
            showSizeChanger: true,
            showTotal: total =>
              `共${total}条记录 第${currentPage}/${res.data.pages}页`,
            onChange: pageNum => {
              this.pageNum = pageNum
              let paramData = {
                pageSize: this.pageSize,
                pageNum: this.pageNum,
                ...this.form
              }
              this.queryRoute(paramData)
            },
            onShowSizeChange: (current, size) => {
              this.pageNum = current
              this.pageSize = size
              let paramData = {
                pageSize: this.pageSize,
                pageNum: this.pageNum,
                ...this.form
              }
              this.queryRoute(paramData)
            }
          }
          this.loading = false
        })
        .catch(rs => {})
    },
    dateChange (date, dateString) {
      this.form.startDate = dateString[0]
      this.form.endDate = dateString[1]
    },
    detail (e) {
      if (e.voyageId) {
        window.open(
          `/shipCenter/voyageManagement/detail/${e.voyageId}`,
          '_blank'
        )
      }
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.btnControl = this.$root._bc
      // console.log(this.$root._bc)
    })

    this.shipNameList()
    this.queryRoute({
      pageSize: this.pageSize,
      pageNum: this.pageNum,
      oilType: 1,
      inOrOut: 2
    })
  }
}
</script>
<style lang="less" scoped>
#takeoutMain {
  padding: 24px;
  margin: 24px;
  background: #fff;
  min-height: 700px;
  .green {
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #00a854;
    margin-right: 5px;
  }
  .red {
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #f04134;
    margin-right: 5px;
  }
}
</style>
